<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hexagon-outer {
            width: 328px;
            height: 190px;
            background: red;
            position: relative;
        }
        .hexagon-outer:before {
            content: "";
            position: absolute;
            top: -82px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 164px solid transparent;
            border-right: 164px solid transparent;
            border-bottom: 82px solid red;
        }
        .hexagon-outer:after {
            content: "";
            position: absolute;
            bottom: -82px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 164px solid transparent;
            border-right: 164px solid transparent;
            border-top: 82px solid red;
        }
        #hexagon:hover{
            animation: rotate-frame 300ms linear 1;
            animation-iteration-count:1;
            -webkit-animation-iteration-count:1;
            transform-origin:center center;

        }
        @keyframes rotate-frame {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(180deg);
            }

        }

        .hexagon-inner{
            width: 298px;
            height: 160px;
            margin: -176px 0 0 15px;
            background:yellow;
            position: relative;
        }
        .hexagon-inner:before {
            content: "";
            position: absolute;
            top: -74.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 149px solid transparent;
            border-right: 149px solid transparent;
            border-bottom: 74.5px solid yellow;
        }
        .hexagon-inner:after {
            content: "";
            position: absolute;
            bottom: -74.5px;
            left: 0;
            width: 0;
            height: 0;
            border-left: 149px solid transparent;
            border-right: 149px solid transparent;
            border-top: 74.5px solid yellow;
        }
        .test{
            width: 385px;
            height: 385px;
            background-image:url("3-15.png") ;
            background-repeat:no-repeat;
            background-attachment:fixed;
            background-position:center;
        }
        .test:hover{
            animation: rotate-frame 3s linear 1;
            animation-iteration-count:1;
            -webkit-animation-iteration-count:1;
            transform-origin:center center;

        }
        .section3-body-list{
            display: flex;
            flex-direction: row;
            justify-content:center;
            align-items: center;
            width: 100%;
        }
        .section3-body-list .section3-body-item{
            width: 33.3333333%;
        }
        .section3-body-list .section3-body-item
    </style>
</head>
<body>
<div style="margin: 200px">
   <!-- <div class="test">
        test
    </div>-->
    <div class="section3-body-list">
            <div class="section3-body-item">
                <div class="section3-body-item-zone">1</div>
            </div>
            <div class="section3-body-item">
                <div class="section3-body-item-zone">2</div>
            </div>
            <div class="section3-body-item">
                <div class="section3-body-item-zone">3</div>
            </div>
    </div>

   <!-- <div id="hexagon">
        <div class="hexagon-outer">1</div>
        <div class="hexagon-inner">2</div>

    </div>-->
    <div></div>

</div>

</body>
</html>